{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/image_안쪽에_box-shadow/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"e990cf2b-ecc9-51fa-b6ed-72fcbab78f08","excerpt":"문제의 상황 및 요구사항 이미지 자체 흰색 배경때문에 이미지의 경계가 불분명함 유저에게 어색한 UI 제공 해결 방안 가상 요소 box-shadow => border보다는 box-shadow를 줬다. border는 영역을 차지하고 box-shadow는 영역을 차지하지 않는다. => 경계를 줌으로써 조금은 더 자연스로운 UI를 보일 수 있다.","html":"

문제의 상황 및 요구사항

\n\n\"스크린샷\n

해결 방안

\n\n
img {\n  &:before {\n\t  content: \"\";\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    border: solid 1px rgba(0, 0, 0, 0.1);\n    border-radius: 4px;\n    z-index: 1;\n\t}\n}
\n\n
img {\n\t-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n\t-moz-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n\tbox-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}
\n

=> border보다는 box-shadow를 줬다. border는 영역을 차지하고 box-shadow는 영역을 차지하지 않는다.

\n

=> 경계를 줌으로써 조금은 더 자연스로운 UI를 보일 수 있다.

\n\"스크린샷","frontmatter":{"title":"image 안쪽에 box-shadow","date":"June 05, 2020"}}},"pageContext":{"slug":"/Today I Learned/image_안쪽에_box-shadow/","previous":{"fields":{"slug":"/JavaScript/Data_Types/"},"frontmatter":{"title":"Data Types","category":"JavaScript","draft":false}},"next":{"fields":{"slug":"/Today I Learned/css_grid와_scroll_snap_사용하기/"},"frontmatter":{"title":"css grid와 scroll snap 사용하기","category":"Today I Learned","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}